<template>
    <view class="container">
        <u-toast ref="uToast" />
        <u-modal v-model="modalShow" :content="modalContent" :mask-close-able="true" show-cancel-button confirm-color="red"
            @confirm="loginOut"></u-modal>
        <view class="head">
            <!-- 登录框 -->
            <u-popup v-model="popupShow" mode="bottom" width="50%">
                <!-- 登录框头部区域 -->
                <view class="head">
                    <img src="static/login_bg.png" alt="" class="headBgc">
                    <p>用户登录</p>
                    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#37DABB"
                        inactive-color="#606266"></u-tabs>
                </view>
                <!-- 登录框表单区域 -->
                <view class="loginForm">
                    <u-form :model="loginForm" ref="uForm">
                        <u-form-item>
                            <u-icon name="email" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                            <u-input v-model="loginForm.email" placeholder="邮箱" />
                        </u-form-item>
                        <u-form-item v-if="current == 0">
                            <u-icon name="lock" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                            <u-input v-model="loginForm.password" type="password" placeholder="密码" confirm-type="search"
                                @confirm="login" />
                        </u-form-item>
                        <u-form-item v-else>
                            <u-icon name="email-fill" size="45" color="#37DABB" class="formItemIcon"></u-icon>
                            <u-input v-model="loginForm.password" type="number" placeholder="验证码" confirm-type="search"
                                @confirm="login" />
                            <u-verification-code :seconds="600" ref="uCode" @change="codeChange"></u-verification-code>
                            <u-button type="success" @click="captcha" size="mini" style="margin-right: 20rpx; background-color: #37DABB;"
                                :ripple="true" ripple-bg-color="#08D3AF">{{tips}}</u-button>
                        </u-form-item>
                        <u-button @click="login" :custom-style="loginBtn" :ripple="true" ripple-bg-color="#08D3AF">登录</u-button>
                    </u-form>
                </view>
            </u-popup>
            <!-- 头部背景 -->
            <img src="static/about_bg.png" alt="">
            <!-- 头像 -->
            <view class="avatar">
                <u-avatar :src="userInfo.user_head" size="140" show-sex :sex-icon="userInfo.user_sex === 0?'woman':'man'"></u-avatar>
            </view>
            <!-- 用户信息右侧 -->
            <view class="user-info">
                <view v-if="!userInfo||userInfo.user_id === -1">
                    <view class="user-name">游客账号</view>
                    <view class="user-remark">Hello world!</view>
                </view>
                <view v-else>
                    <view class="user-name">{{urldecode(userInfo.user_name)}}</view>
                    <view class="user-remark">{{urldecode(userInfo.user_remark)}}</view>
                </view>
            </view>
        </view>
        <!-- 宫格区 -->
        <!-- <view class="grid">
            <u-grid :col="3" :border='false'>
                <u-grid-item>
                    <view class="gridData">{{userInfo.user_chat}}条</view>
                    <view class="grid-text">发言</view>
                </u-grid-item>
                <u-grid-item>
                    <view class="gridData">{{userInfo.user_img}}张</view>
                    <view class="grid-text">斗图</view>
                </u-grid-item>
                <u-grid-item>
                    <view class="gridData">{{userInfo.user_song}}首</view>
                    <view class="grid-text">点歌</view>
                </u-grid-item>
            </u-grid>
        </view> -->
        <!-- 单元格区 -->
        <u-cell-group >
            <navigator url="/pages/music/search" open-type="navigate">
                <u-cell-item icon="search" title="搜索歌曲"></u-cell-item>
            </navigator>
            <navigator url="/pages/user/login" open-type="navigate">
                <u-cell-item icon="play-circle-fill" title="点歌记录"></u-cell-item>
            </navigator>
            <u-cell-item icon="home-fill" title="我的房间" @click="getRoomId"></u-cell-item>
            <navigator url="/pages/user/setting" open-type="navigate">
                <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
            </navigator>
            <u-cell-item icon="close-circle-fill" title="退出登录" v-if="userInfo&&userInfo.user_id != -1" @click="modalShow = true"></u-cell-item>
            <navigator url="/pages/user/login" open-type="navigate" v-else >
                <u-cell-item icon="checkmark-circle-fill" title="点击登录"></u-cell-item>
            </navigator>
        </u-cell-group>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: '密码'
                }, {
                    name: '验证码'
                }],
                current: 0,
                loginForm: {
                    email: '',
                    password: ''
                },
                tips: '',
                loginBtn: {
                    backgroundColor: '#37DABB',
                    color: '#fff',
                    marginTop: '50rpx'
                },
                screenHeight: '',
                accessToken: '',
                userInfo: '',
                modalShow: false,
                modalContent: '确定退出吗？',
                popupShow: false
            }
        },
        onLoad() {
            this.accessToken = uni.getStorageSync('token');
            this.myInfo()
        },
        onShow() {
            this.accessToken = uni.getStorageSync('token');
            this.myInfo()
        },
        methods: {
            urldecode(str) {
                return decodeURIComponent(str);
            },
            getRoomId() {
                if (!this.userInfo.myRoom) {
                    this.$refs.uToast.show({
                        title: "你还没有房间喔",
                        type: 'error',
                        duration: '2300'
                    })
                    return
                }
                uni.navigateTo({
                    url: '../room/room?id=' + this.userInfo.myRoom.room_id + "&from=center"
                })
            },
            // 获取验证码
            async captcha() {
                const res = await this.$u.api.email({
                    "email": this.loginForm.email
                })
                if (res.code !== 200) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                        duration: '2300'
                    })
                }
                this.$refs.uToast.show({
                    title: res.msg,
                    type: "success",
                    duration: 2300
                })
                this.$refs.uCode.start();
            },
            //获取用户信息
            async myInfo() {
                const res = await this.$u.api.getMyInfo({
                    "access_token": this.accessToken
                })
                if (res.code !== 200) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                        duration: '2300'
                    })
                    uni.setStorageSync('token', '');
                    console.log(res.msg);
                    this.myInfo();
                }
                this.popupShow = false
                this.userInfo = res.data
                uni.setStorageSync('userInfo', res.data);
                console.log(this.userInfo)
            },
            // 退出
            loginOut() {
                console.log('已退出')
                uni.setStorageSync('token', '');
                this.$refs.uToast.show({
                    title: '已退出',
                    type: 'error',
                    duration: '1500'
                })
                this.myInfo();
            },
            change(index) {
                this.current = index;
                this.loginForm.password = '';
            },
            codeChange(text) {
                this.tips = text;
            }
        }
    }
</script>

<style>
    page {
        background-color: #f4f4f5;
    }

    .container {
        width: 100%;
    }

    .head {
        position: relative;
    }

    .head>img {
        height: 350rpx;
        width: 100%;
    }

    .head>p {
        position: absolute;
        top: 20%;
        left: 10%;
        color: #FFFFFF;
        font-size: 58rpx;
        font-weight: 700;
    }

    .avatar {
        position: absolute;
        top: 15%;
        left: 5%;
    }

    .user-name {
        position: absolute;
        font-size: 32rpx;
        top: 18%;
        left: 28%;
        font-size: 40rpx;
        color: #303133;
    }
    .user-remark {
        position: absolute;
        font-size: 13px;
        top: 35%;
        left: 28%;
        width: 60%;
        color: #303133;
    }

    .grid-text {
        font-size: 25rpx;
        margin-top: 4rpx;
        color: #909399;
    }

    .gridData {
        font-size: 35rpx;
        font-weight: 600;
    }

    .section {
        width: 80%;
        margin: 0 auto;
    }

    .loginForm {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 40rpx;
    }

    .formItemIcon {
        padding: 5rpx 10rpx 0 0;
    }
</style>
